<template>
	<div class="video_clip_content">
		<div class="bodybox">
			<div class="canvas"></div>
			<slot name="delete"></slot>
		</div>
		<div class="handle">
			<slot name="list"></slot>
		</div>
		<div class="button">
			<el-button size="medium" type="primary" @click="handleConfirmClip()">确定编辑</el-button>
		</div>
	</div>
</template>

<script>
export default {
	methods: {
		handleConfirmClip() {
			this.$emit('confirm');
		}
	}
};
</script>

<style lang="scss" scoped>
.video_clip_content {
	display: flex;
	flex-direction: column;
	flex: 1;
	overflow: hidden;
	.bodybox::v-deep {
		flex: 1;
		overflow: hidden;
		background-color: #000;
		position: relative;
		.canvas {
			position: relative;
			z-index: 2;
			width: 100%;
			height: 100%;
			background-color: #000;
		}
		.delete {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			font-size: 120px;
			box-sizing: border-box;
			border: dashed 1px #f56c6c;
			background: url('~@/assets/img/recycled.svg') no-repeat center #fef0f0;
		}
		.video_item {
			opacity: 0;
		}
	}
	.handle {
		flex-shrink: 0;
		margin-top: 16px;
		min-height: 129px;
		border: solid 1px #ebeef5;
		overflow: hidden;
		overflow-x: auto;
	}
	.list {
		height: 100%;
		min-width: 100%;
		padding-right: 10px;
		box-sizing: border-box;
		overflow: hidden;
	}
	.button {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-top: 16px;
	}
}
</style>
